//	.clsPage {
//		width: 40px;
//		height: 40px;
//		border: 1px solid blue;
//		background: orange;
//		display: inline-block;
//		margin: 2px;
//		text-align: center;
///*		vertical-align: middle;*/
//		line-height: 40px;
///*		background-image: url('titles.gif');*/
//		cursor: pointer;
//		font-size: 40px;
//	}	

/*
Creator: vanduong
*/

function PagingEvent(newContainerId) {
    var containerId = newContainerId;
    var nextHandle = null;
    var previousHandle = null;
    var pageHandle = null;
    var firstHandle = null;
    var lastHandle = null;
    var totalPage = 5;
    var maxPageDisplay = 5;
    var pageSize = 40;
    var prefixPageId = "page";
    var selectedColor = "blue";
    var foreColor = "black";
    var navigationBarColor = "black";
    var pageCreated = false;
    var totalPagePrevisous = 0;
    var totalPageSmaller = false;
    var hasHidden = true;
    var pageClassName = "clsPage"
    var classNameNext = "clsNext";
    var classNameLast = "clsNext"
    var classNameFirst = "clsPrevious"
    var classNamePrevious = "clsPrevious";
    var previousId = "btnPrevious";
    var nextId = "btnNext";
    var firstId = "btnFirst";
    var lastId = "btnLast";
    var nextCaption = ">";
    var previousCaption = "<";
    var firstCaption = "|<";
    var lastCaption = ">|";
    var showFirstLast = false;
    var currentPage = null;
    var autoMove = false;
    this.currentIndex = 0;
    this.currentPageId = 1;

    this.setContainerId = function (newContainerId) {
        if (containerId == newContainerId || newContainerId == null || newContainerId == "") {
            return;
        }

        if (pageCreated) {
            if (!moveElement(containerId, newContainerId)) {
                return;
            }
        }

        containerId = newContainerId;
    }

    this.setTotalPage = function (value) {
        totalPage = value;
        realPageDisplay();
        checkHide();
    }

    this.getTotalPage = function () {
        return totalPage;
    }

    this.setAutoMove = function (value) {
        autoMove = value;
    }

    this.setSelectedColor = function (color) {
        selectedColor = color;
        if (currentPage) {
            currentPage.style.color = selectedColor;
        }
    }

    this.setPageColor = function (color) {
        foreColor = color;
        if (pageCreated) {
            for (var i = 0; i < maxPageDisplay; i++) {
                var element = document.getElementById(prefixPageId + (i + 1));
                element.style.color = foreColor;
            }
            if (currentPage) {
                currentPage.style.color = selectedColor;
            }
        }
    }

    this.setFirstLastNextPreviousColor = function (color) {
        navigationBarColor = color;
        if (pageCreated) {
            setNavigationBarColor(navigationBarColor);
        }
    }

    this.setMaxPageDisplay = function (value) {
        maxPageDisplay = value;
    }

    //an phan trang neu chi co duy nhat 1 trang 
    this.setHidePagingOnOne = function (boolValue) {
        hasHidden = boolValue;
        checkHide();
    }

    this.HideNextLastButton = function (boolValue) {
        var value = "";
        if (boolValue) {
            value = "none";
        }
        document.getElementById(nextId).style.display = value;
        document.getElementById(lastId).style.display = value;
    }

    this.HidePreviousFirstButton = function (boolValue) {
        var value = "";
        if (boolValue) {
            value = "none";
        }
        document.getElementById(previousId).style.display = value;
        document.getElementById(firstId).style.display = value;
    }

    this.setEvent = function (_previousHandler, _pageHandler, _nextHandler, _firstHandle, _lastHandle) {
        firstHandle = _firstHandle;
        lastHandle = _lastHandle;
        pageHandle = _pageHandler;
        nextHandle = _nextHandler;
        previousHandle = _previousHandler;
        if (pageCreated) {            
            var firstElement = document.getElementById(firstId);
            var lastElement = document.getElementById(lastId);
            var nextElement = document.getElementById(nextId);
            var previousElement = document.getElementById(previousId);

            firstElement.onclick = firstHandle;
            lastElement.onclick = lastHandle;
            nextElement.onclick = nextHandle;
            previousElement.onclick = previousHandle;
            for(var i = 0; i< maxPageDisplay;i++)
            {
                var pageElement = document.getElementById(prefixPageId + (i + 1));
                if (pageElement) {
                    pageElement.onclick = pageHandle;
                }
            }
        }
    }

    this.setCaption = function (first, previous, next, last) {
        firstCaption = first;
        previousCaption = previous;
        nextCaption = next;
        lastCaption = last;
        if (pageCreated) {
            document.getElementById(previousId).innerHTML = previousCaption;
            document.getElementById(nextId).innerHTML = nextCaption;
            document.getElementById(firstId).innerHTML = firstCaption;
            document.getElementById(lastId).innerHTML = lastCaption;
        }
    }

    this.visibleFirstLastButton = function (value) {
        showFirstLast = value;
        var val = "";
        if (pageCreated) {
            showFirstLastButton();
        }
    }

    this.create = function () {
        var container = document.getElementById(containerId);
        var first = createNode("p", classNameFirst, firstHandle, firstCaption, firstId);
        container.appendChild(first);
        var previous = createNode("p", classNamePrevious, previousHandle, previousCaption, previousId);
        container.appendChild(previous);

        for (var i = 0; i < maxPageDisplay; i++) {
            var page = document.createElement("p");
            page.innerHTML = (i + 1) + "";
            page.setAttribute('data-index', i);
            page.style.color = foreColor;
            page.onclick = pageHandle;
            page.className = pageClassName;
            page.id = prefixPageId + (i + 1);

            container.appendChild(page);
        }

        var next = createNode("p", classNameNext, nextHandle, nextCaption, nextId);
        container.appendChild(next);
        var last = createNode("p", classNameLast, lastHandle, lastCaption, lastId);
        container.appendChild(last);
        pageCreated = true;
        showFirstLastButton();
        setNavigationBarColor();
        realPageDisplay();
        checkHide();
    }

    var setNavigationBarColor = function (color) {
        document.getElementById(firstId).style.color = color;
        document.getElementById(lastId).style.color = color;
        document.getElementById(nextId).style.color = color;
        document.getElementById(previousId).style.color = color;
    }

    var showFirstLastButton = function () {
        if (showFirstLast) {
            val = "";
        }
        else {
            val = "none";
        }
        document.getElementById(firstId).style.display = val;
        document.getElementById(lastId).style.display = val;
    }

    var createNode = function (tagType, className, handler, caption, id) {
        var element = document.createElement(tagType);
        element.className = className;
        element.onclick = handler;
        element.id = id;
        element.innerHTML = caption;

        return element;
    }

    this.setCurrentPage = function (index) {
        var begin = 0;
        var percent, position;

        if (index >= totalPage || index < 0)
            return this.currentIndex;

        position = index + 1;
        percent = position % maxPageDisplay;

        if (percent > 0) {
            begin = chiaLayPhanNguyen(position, maxPageDisplay) * maxPageDisplay + 1;
        }
        else if (position % maxPageDisplay == 0) {
            begin = (chiaLayPhanNguyen(position, maxPageDisplay) - 1) * maxPageDisplay + 1;
        }
        // Sets text
        for (var i = 0; i < maxPageDisplay; i++) {
            var element = document.getElementById(prefixPageId + (i + 1));
            element.innerHTML = begin + "";
            element.setAttribute("data-index", begin - 1);
            element.style.color = foreColor;

            if (begin == position) {
                element.style.color = selectedColor;
                currentPage = element;
                this.currentPageId = i + 1;
            }
            begin++;
        }

        percent = totalPage % maxPageDisplay;
        var division = chiaLayPhanNguyen(totalPage, maxPageDisplay);
        begin = division * maxPageDisplay + 1;
        //alert("percent: " + percent + ", begin: " + begin + ", position: " + position + ", this.totalPage: " + this.totalPage);
        if (begin <= position && position <= totalPage) {
            if (percent >= 1 && percent <= (maxPageDisplay - 1)) {
                setCountButton(percent);
            }
        }
        else {
            setCountButton(maxPageDisplay);
        }

        //objStateManager.SetState(index, totalPage);

        scaleCaption();

        this.currentIndex = index;

        return index;
    }

    this.resetCurrentPageColor = function () {
        var element = document.getElementById(prefixPageId + this.currentPageId);
        element.style.color = foreColor;
    }

    this.setVisible = function (value) {
        if (value) {
            document.getElementById(containerId).style.visibility = "";
        } else document.getElementById(containerId).style.visibility = "hidden";
    }

    this.setHidden = function (value) {
        if (value) {
            document.getElementById(containerId).style.display = "none";
        } else document.getElementById(containerId).style.display = "";
    }

    this.setPageClassName = function (name) {
        pageClassName = name;
        if (pageCreated) {
            for (var i = 0; i < maxPageDisplay; i++) {
                document.getElementById(prefixPageId + (i + 1)).className = pageClassName;
            }
        }
    }

    this.setFirstClassName = function (name) {
        classNameFirst = name;
        if (pageCreated) {
            document.getElementById(firstId).className = classNameFirst;
        }
    }

    this.setLastClassName = function (name) {
        classNameLast = name;
        if (pageCreated) {
            document.getElementById(lastId).className = classNameLast;
        }
    }

    this.setNextClassName = function (name) {
        classNameNext = name;
        if (pageCreated) {
            document.getElementById(nextId).className = classNameNext;
        }
    }

    this.setPreviousClassName = function (name) {
        classNamePrevious = name;
        if (pageCreated) {
            document.getElementById(previousId).className = classNamePrevious;
        }
    }

    this.addPageClassName = function (name) {
        if (pageCreated) {
            for (var i = 0; i < maxPageDisplay; i++) {
                document.getElementById(prefixPageId + (i + 1)).className += " " + name;
            }
        }
    }

    this.addClassNameNextButton = function (name) {
        if (pageCreated) {
            document.getElementById(nextId).className += " " + name;
        }
    }

    this.addClassNamePreviousButton = function (name) {
        if (pageCreated) {
            document.getElementById(previousId).className += " " + name;
        }
    }

    this.addClassNameFirstButton = function (name) {
        if (pageCreated) {
            document.getElementById(firstId).className += " " + name;
        }
    }

    this.addClassNameLastButton = function (name) {
        if (pageCreated) {
            document.getElementById(lastId).className += " " + name;
        }
    }

    this.setCss = function (caption, css) {
        var ids = [];
        if (caption == "previous" || caption == "back") {
            ids.push(previousId);
        } else if (caption == "next") {
            ids.push(nextId);
        }
        else if (caption == "page") {
            for (var i = 0; i < maxPageDisplay; i++) {
                ids.push(prefixPageId + (i + 1));
            }
        }
        else if (caption = "first") {
            ids.push(firstId);
        }
        else if (caption = "last") {
            ids.push(lastId);
        }

        for (var i = 0; i < ids.length; i++) {
            var obj = document.getElementById(ids[i]);
            for (var key in css) {
                obj.style[key] = css[key];
            }
        }
    }

    this.setPreviousCss = function (css) {
        this.setCss("previous", css);
    }

    this.setPageCss = function (css) {
        this.setCss("page", css);
    }

    this.setNextCss = function (css) {
        this.setCss("next", css);
    }

    this.setFirstCss = function (css) {
        this.setCss("first", css);
    }

    this.setLastCss = function (css) {
        this.setCss("last", css);
    }

    var setCountButton = function (count) {

        for (var i = 0; i < maxPageDisplay; i++) {
            //alert("i: " + i + ", prefixPageId + (i + 1): " + prefixPageId + (i + 1));
            var element = document.getElementById(prefixPageId + (i + 1));
            //alert("count: " + count);

            if (i >= count) {
                if (autoMove) {
                    element.style.display = "none";
                }
                else {
                    element.style.visibility = "hidden";
                }
                //alert(" ")	;
            }
            else {
                element.style.visibility = "";
                element.style.display = "";
                //alert(" dfgd");
            }

        }
    }

    var hidePage = function (count) {
        for (var i = 0; i < maxPageDisplay; i++) {
            var element = document.getElementById(prefixPageId + (i + 1));

            if (i >= count) {
                element.style.display = "none";
            }
            else {
                element.style.display = "";
                element.style.visibility = "";
            }
        }
    }

    var realPageDisplay = function () {
        var totalPageShowed = 0;
        if (pageCreated && totalPage != totalPagePrevisous) {

            totalPagePrevisous = totalPage;

            if (totalPage >= 1 && totalPage < maxPageDisplay) {
                totalPageShowed = totalPage;
            }
            else {
                totalPageShowed = maxPageDisplay;
            }

            hidePage(totalPageShowed);
        }
    }

    var checkHide = function () {

        if (pageCreated && totalPage <= 1) {
            if (hasHidden) {
                document.getElementById(containerId).style.visibility = "hidden";
            }
            else document.getElementById(containerId).style.visibility = "";
        }
        else {
            document.getElementById(containerId).style.visibility = "";
        }
    }

    var scaleCaption = function () {

    }

    var chiaLayPhanNguyen = function (a, b) {
        return Math.floor(a / b);
    }

    var moveElement = function (oldParentId, newParentId) {
        var newParent = document.getElementById(newParentId);
        var oldParent = document.getElementById(oldParentId);
        if (oldParent == null || newParent == null) {
            return false;
        }

        while (oldParent.childNodes.length > 0) {
            newParent.appendChild(oldParent.childNodes[0]);
        }

        return true;
    }

    var makePage = function (tagName, id, caption, handler, className, dataName, dataValue) {
        var page = document.createElement(tagName);
        page.innerHTML = caption;
        page.setAttribute(dataName, dataValue);
        page.onclick = handler;
        page.className += className;
        page.id = id;

    }
}